<template>
	<view>
		<uni-nav-bar @clickLeft="toBack" color="#555" leftIcon="arrowleft" title="完善信息" :fixed="true" :status-bar="true"></uni-nav-bar>

		<view class="edit-user-head">
			<image @tap="changUserHead" :src="userInfo.userHeadUrl" mode="aspectFill"></image>
			<view class="icon iconfont icon-pencil"></view>
		</view>

		<view class="user-from">
			<view class="from-item">
				<view class="lable">昵称</view>
				<view class="item-group"><input type="text" v-model="userInfo.nickName" placeholder-class="item-placeholder" placeholder="输入昵称" /></view>
			</view>

			<view class="from-item">
				<view class="lable">常驻城市</view>
				<view class="item-group">
					<input disabled type="text" v-model="cityInfo.city" placeholder-class="item-placeholder" placeholder="点击定位,获取您的城市" />
					<view class="icon iconfont icon-dingwei" @tap="checkLocation"></view>
				</view>
			</view>

			<view class="from-item">
				<view class="lable">生日</view>
				<view class="item-group" @tap="calendarShow">
					<view :class="[!userInfo.birthday || userInfo.birthday === '' ? 'item-placeholder' : '']" class="uni-input">
						{{ !userInfo.birthday || userInfo.birthday === '' ? '请选择您的生日' : userInfo.birthday }}
					</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>

			<view class="from-item">
				<view class="lable">身高</view>
				<picker class="picker" @change="bindHeightChange" :value="userInfo.height" range-key="name" :range="heightArr">
					<view class="picker-item-group">
						<view :class="[!userInfo.height || userInfo.height === 0 ? 'item-placeholder' : '']" class="uni-input">
							{{ !userInfo.height || userInfo.height === 0 ? '请选择身高' : userInfo.height + ' CM' }}
						</view>
						<view class="icon iconfont icon-youjiantou"></view>
					</view>
				</picker>
			</view>

			<view class="from-item">
				<view class="lable">微信</view>
				<view class="item-group"><input type="text" v-model="userInfo.wechat" placeholder-class="item-placeholder" placeholder="输入微信号" /></view>
			</view>

			<view class="button" @tap="submit">确定</view>

			<uni-popup ref="popup" type="bottom"><data-calendar @confirm="confirm" @cancer="cancer" :flag="birthdayFlage"></data-calendar></uni-popup>

			<uni-popup :mask-click="false" ref="authPop" type="dialog">
				<uni-popup-dialog type="info" content="请打开定位服务" title="提示" :before-close="true" @confirm="authConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import dataCalendar from '../../components/user/data-calendar.vue';
import permision from '@/js_sdk/wa-permission/permission.js';
import showToast from '../../utils/ToastUtils.js';
import constant from '../../utils/Constant.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
export default {
	components: {
		dataCalendar,
		uniPopup,
		uniPopupDialog
	},
	data() {
		return {
			gender: null,
			userInfo: {
				userHeadUrl: '../../static/user/user-head.png',
				nickName: '',
				height: 0,
				birthday: '',
				height: '',
				wechat: ''
			},
			cityInfo: {
				city:'',
				latitude:0,
				longitude:0
			},
			birthdayFlage: false,
			heightArr: []
		};
	},
	methods: {
		toBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		checkLocation() {
			let bool = permision.checkSystemEnableLocation();
			if (bool === false) {
				this.$refs.authPop.open();
			} else {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						this.cityInfo.latitude = res.latitude;
						this.cityInfo.longitude = res.longitude;
						this.cityInfo.city = res.address.city;
					},
					error: res => {
						console.log(res);
					}
				});
			}
			return bool;
		},
		authConfirm() {
			this.$refs.authPop.close();
			permision.gotoAppPermissionSetting();
		},
		calendarShow() {
			this.$refs.popup.open();
			this.birthdayFlage = true;
		},
		changUserHead() {
			uni.showToast({
				icon: 'none',
				title: '头像将用于认证对比,请选择人脸清晰的图片',
				success:()=> {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera '],
						success: res => {
							uni.showLoading({
								mask:true
							});
							this.uploadUserHeard(res.tempFilePaths[0]);
						}
					});
				}
			});
		},
		confirm(e) {
			this.userInfo.birthday = `${e.year}年${e.month < 10 ? '0' + e.month : e.month}月${e.day < 10 ? '0' + e.day : e.day}日`;
			this.birthdayFlage = false;
			this.$refs.popup.close();
		},
		cancer() {
			this.birthdayFlage = false;
			this.$refs.popup.close();
		},
		bindHeightChange(e) {
			this.userInfo.height = this.heightArr[e.detail.value].value;
		},
		buildHeightArr() {
			for (let i = 150; i <= 250; i++) {
				this.heightArr.push({ name: i + ' CM', value: i });
			}
		},
		submit() {
			if (!this.cityInfo.city) {
				showToast('所在城市不能为空');
				return;
			}
			if (!this.userInfo.nickName) {
				showToast('昵称不能为空');
				return;
			}
			if (!this.userInfo.userHeadUrl) {
				showToast('头像不能为空');
				return;
			}
			if (!this.userInfo.birthday) {
				showToast('生日不能为空');
				return;
			}
			if (!this.userInfo.height) {
				showToast('身高不能为空');
				return;
			}
			if (this.gender === 0 && !this.userInfo.wechat) {
				showToast('微信不能为空');
				return;
			}
			let dataSet = {
				gender: this.gender,
				userCity: this.cityInfo.city,
				longitude: this.cityInfo.longitude,
				latitude: this.cityInfo.latitude,
				nickName: this.userInfo.nickName,
				headUrl: this.userInfo.userHeadUrl,
				birthday: this.userInfo.birthday,
				height: this.userInfo.height,
				wechatAccount: this.userInfo.wechat
			};
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.replenish,
				data: dataSet,
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.setStorageSync(constant.user,res.data.data);
						uni.setStorageSync(constant.first, 1);
						uni.switchTab({
							url: '../index/index'
						});
					} else {
						showToast(res.data.msg);
					}
				}
			});
		},
		uploadUserHeard(temUrl) {
			let user = uni.getStorageSync(constant.user);
			uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.userHeard,
				name: 'file',
				filePath: temUrl,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`
				},
				success: res => {
					uni.hideLoading();
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						this.userInfo.userHeadUrl = data.data;
					} else {
						showToast(data.msg);
					}
				},fail() {
					uni.hideLoading();
				}
			});
		}
	},
	onLoad(option) {
		this.gender = option.gender;
		this.buildHeightArr();
	}
};
</script>

<style lang="less" scoped>
.edit-user-head {
	position: relative;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
	}

	.icon-pencil::before {
		background-color: #ffffff;
		padding: 8rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -25%);
		padding: 8rpx;
		color: #999999;
		font-size: 36rpx;
		line-height: 36rpx;
	}
	.edit-user-img-title {
		margin-top: 10rpx;
		font-size: 34rpx;
		color: #999999;
	}
}

.user-from {
	.from-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 20rpx;
		padding-left: 40rpx;
		margin: 20rpx 0;
		.lable {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			width: 25%;
			margin-right: 18rpx;
			padding-bottom: 18rpx;
		}
		.item-group {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-right: 40rpx;
			padding-bottom: 18rpx;
			border-bottom: 1rpx solid #eeeeee;
			width: 100%;
		}
		input {
			font-size: 32rpx;
			color: #333333;
		}
		.picker {
			width: 100%;
			margin-left: 0;
			padding-left: 0;
			padding-right: 40rpx;
			padding-bottom: 18rpx;
			border-bottom: 1rpx solid #eeeeee;
			.picker-item-group {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}
		}

		.uni-input {
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			margin: 0;
			padding: 0;
		}
		.item-placeholder {
			font-size: 30rpx;
			color: #999999;
		}
		.icon-dingwei::before {
			font-size: 34rpx;
			color: #999999;
		}
		.icon-youjiantou::before {
			font-size: 34rpx;
			color: #999999;
		}
	}

	.user-desc {
		display: flex;
		flex-direction: row;
		padding: 20rpx 40rpx 18rpx;

		.lable {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			width: 25%;
		}

		.item-group-textarea {
			display: flex;
			flex-direction: row;
			width: 77%;
			textarea {
				height: 100rpx;
				font-size: 28rpx;
				margin-top: 7rpx;
			}
		}
	}
}
.button {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20%;
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 30rpx;
	width: 75%;
	background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
	color: #ffffff;
	font-size: 38rpx;
	font-weight: 500;
}
</style>
